<template>
    <div class='container'>
        <div class='coupon'>
            <el-breadcrumb class='topBox' separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>微言课堂</el-breadcrumb-item>
            </el-breadcrumb>
            <el-tabs class='tabsBox' v-model="activeCoupon" @tab-click="handleClick">
                <el-tab-pane :label="item.name" :name="String(index)" v-for="(item,index) in detail.teams" :key="index">
                    <Audits ref='Audits' :id="item.id" :userId="detail.id"></Audits>
                </el-tab-pane>
            </el-tabs>

        </div>
        <div>
             <qriously class="code" :value="value" :size="size" v-if="!token"/>
        </div>
    </div>
</template>


<script>
import Audits from './components/tabAudits';
import { getToken } from '@/utils/auth'
import {userMy,loginCode} from '@/api/user'
import SockJS from 'sockjs-client';
import Stomp from 'stompjs';
export default {
    data(){
        return {
            activeCoupon: '0',
            listQuery:{
                limit:10
            },
            detail:{},
            token:sessionStorage.getItem('userToken')||'',
            size:300,
            value:'',
            ws:'',
            subscribe:''
        }
    },
    methods:{
        panduan(){
            if(this.token){
                this.getData();
            }else{
                this.getCode();
            }
        },
        getCode(){
              loginCode().then(res => {
               if(res.status===200){
                   console.log(res);
                   this.value=res.data.code
                   this.disconnect()
                    this.ws=res.data.ws
                    this.subscribe=res.data.subscribe
                    this.initWebSocket()
                    this.timer=setInterval(()=>{
                        setTimeout(()=>{
                        this.panduan()
                        },1000)
                    },res.data.expired*1000)
               }else{
                   console.log('err')
               }
            })
        },
    initWebSocket() { //初始化weosocket
        this.connection();
    },
      connection() {
        // 建立连接对象
        let socket = new SockJS(this.ws);
        // 获取STOMP子协议的客户端对象
        this.stompClient = Stomp.over(socket);
        // 定义客户端的认证信息,按需求配置
        let headers = {
          Authorization: ''
        };
        // 向服务器发起websocket连接
        this.stompClient.connect(headers, () => {
          this.stompClient.subscribe(this.subscribe, (msg) => { // 订阅服务端提供的某个topic
            console.log(msg.body, "收到消息");  // msg.body存放的是服务端发送给我们的信息
            let data=JSON.parse(JSON.parse(msg.body).data)
            this.token=data.token;
            sessionStorage.setItem('userToken',data.token);
            this.panduan();
          }, headers);
        }, (err) => {
          console.log(err, '失败');
          this.connection();
        });
      },    //连接 后台
      disconnect() {
        if (this.stompClient) {
          this.stompClient.disconnect();
        }
      },
        getData(){
            userMy({token:this.token}).then(res => {
               if(res.status===200){
                   this.detail=res.data
               }else{
                   console.log('err')
               }
            })
        },
        handleClick(){
            switch (this.activeCoupon) {
                // case '待审核':
                //     this.$refs.Audits.getCouponList('checking');
                //     this.$refs.Audits.dynamicText('待审核');
                //     break;
                // case '审核通过':
                //     this.$refs.Pass.getCouponList('success');
                //     this.$refs.Pass.dynamicText('审核通过');
                //     break;
                // case '审核失败':
                //     this.$refs.Failure.getCouponList('refuse');
                //     this.$refs.Failure.dynamicText('审核失败');
                //     break;    
                default:
                    break;
            }
        }
    },
    mounted(){
       this.panduan();
        // this.$nextTick(() => {
        //     this.$refs.Audits.getCouponList('checking');
        //     this.$refs.Audits.dynamicText('待审核');
        // });
    //    if(sessionStorage.getItem('activeCoupon')){
    //        this.activeCoupon=sessionStorage.getItem('activeCoupon')
    //        this.handleClick();
    //    }
    },
    components:{
       Audits
    }
}
</script>


<style lang="scss" scoped>
.container{
    margin-top: 32px;
    .coupon{
        width: 90%;
        margin: 0 auto;
        .topBox{
            color: rgba(16, 16, 16, 1);
            font-size: 24px;
            margin-bottom: 50px;
        }
        .tabsBox{
            margin-top: 26px;
        }
    } 
    .code{
        display: flex;
        justify-content: center;
        margin-top: 10%;
    }   
}
</style>
